<script>
    import { createEventDispatcher } from 'svelte';

    const dispatch = createEventDispatcher();

    export let open = false;

    function closeModal() {
        dispatch('close');
    }

    function handleClickOutside(event) {
        if (event.target === event.currentTarget) {
            closeModal();
        }
    }
</script>

{#if open}
    <div class="modal" on:click={handleClickOutside}>
        <div class="modal-content">
            <slot></slot>
        </div>
    </div>
{/if}

<style>
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .modal-content {
        background: white;
        padding: 16px;
        border-radius: 8px;
        max-width: 90%;
        max-height: 90%;
        overflow-y: auto;
    }
</style>
